<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打工性价比计算器</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-calculator"></i> 打工性价比计算器</h1>
            <p>输入工作相关因素，计算工作的综合性价比和实际时薪</p>
        </header>

        <main>
            <div class="calculator">
                <form id="job-form">
                    <div class="form-group">
                        <label for="salary">月薪 (元)</label>
                        <input type="number" id="salary" name="salary" min="0" required>
                    </div>

                    <div class="form-group">
                        <label for="workHours">每周工作时长 (小时)</label>
                        <input type="number" id="workHours" name="workHours" min="0" max="168" required>
                    </div>

                    <div class="form-group">
                        <label for="commuteTime">单程通勤时间 (分钟)</label>
                        <input type="number" id="commuteTime" name="commuteTime" min="0" required>
                    </div>

                    <div class="form-group">
                        <label for="education">学历要求</label>
                        <select id="education" name="education" required>
                            <option value="">请选择</option>
                            <option value="1">初中及以下</option>
                            <option value="2">高中/中专</option>
                            <option value="3">大专</option>
                            <option value="4">本科</option>
                            <option value="5">硕士</option>
                            <option value="6">博士</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="experience">工作经验要求 (年)</label>
                        <input type="number" id="experience" name="experience" min="0" required>
                    </div>

                    <div class="form-group">
                        <label for="overtime">每月加班时长 (小时)</label>
                        <input type="number" id="overtime" name="overtime" min="0" required>
                    </div>

                    <div class="form-group">
                        <label for="benefits">福利待遇 (1-10分)</label>
                        <input type="range" id="benefits" name="benefits" min="1" max="10" value="5">
                        <span id="benefitsValue">5</span>
                    </div>

                    <div class="form-group">
                        <label for="environment">工作环境 (1-10分)</label>
                        <input type="range" id="environment" name="environment" min="1" max="10" value="5">
                        <span id="environmentValue">5</span>
                    </div>

                    <div class="form-group">
                        <label for="pressure">工作压力 (1-10分，越高压力越大)</label>
                        <input type="range" id="pressure" name="pressure" min="1" max="10" value="5">
                        <span id="pressureValue">5</span>
                    </div>

                    <div class="form-group">
                        <label for="growth">成长空间 (1-10分)</label>
                        <input type="range" id="growth" name="growth" min="1" max="10" value="5">
                        <span id="growthValue">5</span>
                    </div>

                    <div class="form-group">
                        <label for="stability">工作稳定性 (1-10分)</label>
                        <input type="range" id="stability" name="stability" min="1" max="10" value="5">
                        <span id="stabilityValue">5</span>
                    </div>

                    <button type="submit" class="calculate-btn">计算性价比</button>
                </form>
            </div>

            <div class="result" id="result">
                <h2><i class="fas fa-chart-line"></i> 计算结果</h2>
                <div class="result-content hidden" id="result-content">
                    <div class="score-container">
                        <div class="score" id="score">0</div>
                        <div class="score-label">综合性价比评分</div>
                    </div>
                    <div class="details">
                        <h3><i class="fas fa-list-ul"></i> 详细分析</h3>
                        <ul id="analysis-list">
                            <!-- 这里将由JavaScript填充 -->
                        </ul>
                    </div>
                    <div class="hourly-rate">
                        <h3><i class="fas fa-money-bill-wave"></i> 实际收益</h3>
                        <p>实际时薪: <span id="hourly-rate">0</span> 元/小时</p>
                        <p class="hourly-rate-note">此数值反映了工作时间、通勤时间和其他因素对实际收入的影响</p>
                    </div>
                </div>
            </div>
        </main>

        <footer>
            <p>注意：本计算器仅供参考，实际工作选择应考虑更多个人因素。</p>
            <p>通过综合评估11项关键因素，帮助您做出更明智的职业决策</p>
        </footer>
    </div>

    <script src="script.js"></script>
</body>
</html>